/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput
} from 'react-native';

var Dimensions = require('Dimensions');

var {width, height} = Dimensions.get('window');

export default class loginView extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image source={require('./img/icon.png')} style={styles.iconStyle} />
                {/*输入框*/}
                <TextInput placeholder={'请输入用户名'}
                           style={styles.textinputStyle}
                           clearButtonMode='while-editing'
                           keyboardType='number-pad'
                           underlineColorAndroid='transparent'
                />
                <TextInput placeholder={'请输入密码'}
                           password={true}
                           style={styles.textinputStyle}
                           returnKeyType='go'
                           returnKeyLabel='go'
                />
                {/*登录*/}
                <View style={styles.loginStyle}>
                    <Text style={styles.loginText}>登录</Text>
                </View>
                {/*无法登录*/}
                <View style={styles.otherSetting}>
                    <Text style={{color:'#47b6f9'}}>无法登录?</Text>
                    <Text style={{color:'#47b6f9'}}>新用户</Text>
                </View>
                {/*其他登录方式*/}
                <View style={styles.bottomStyle}>
                    <Text>其他登录方式</Text>
                    <Image source={require('./img/icon3.png')} style={styles.otherIcon} />
                    <Image source={require('./img/icon7.png')} style={styles.otherIcon}/>
                    <Image source={require('./img/icon8.png')} style={styles.otherIcon}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#dddddd',
    },
    iconStyle:{
        width:80,
        height:80,
        borderRadius:40,
        borderWidth:2,
        borderColor:'white',
        marginTop:50,
        marginBottom:30,
    },
    textinputStyle:{
        height:38,
        backgroundColor:'white',
        marginBottom:2,
        textAlign:'center',
        width:width,
        alignItems:'center',
    },
    loginStyle: {
        marginTop:30,
        width:width - 30,
        height:40,
        backgroundColor:'#47b6f9',
        justifyContent:'center',
        alignItems:'center',
        borderRadius:8,
    },
    loginText:{
        color:'white',
    },
    otherSetting:{
        flexDirection:'row',
        marginTop:10,
        width:width - 30,
        justifyContent:"space-between",
    },
    bottomStyle:{
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        bottom:15,
        marginLeft:15,
    },
    otherIcon:{
        width:50,
        height:50,
        borderRadius:25,
        marginLeft:10,
    }
});

module.exports = loginView;
